<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">
    <div id="layout-header" class="Unselectable fontRegular">
        <h:link id="layout-logo" outcome="/dashboard.xhtml">
            <h:graphicImage value="#{resource['sentinel-layout:images/LOGO.svg']}" class="Fleft"/>
            <span class="Fs19 FontTitilliumSemiBoldItalic Fleft">
                <span class="softblue">SENTINEL</span><span class="hardblue">LAYOUT</span>
            </span>
        </h:link>

        <ul id="sm-topmenu" class="layout-header-widgets white Fs14">
            <li class="Fleft BordRadHalf TexAlCenter">
                <i class="icon-user-male"/>
                <ul class="layout-header-widgets-submenu BordRad5 shadows white Animated05">
                    <li class="Animated05"><a class="white Unselectable"><i class="icon-user-male Fs26 OvHidden"/><span class="Fs18">Walter White<br /><span class="Fs10">Last Login - 18.08.2014</span></span></a></li>
                    <li class="Animated05"><a href="#" class="white Unselectable"><i class="icon-stopwatch-1"/>User Tasks</a></li>
                    <li class="Animated05"><a href="#" class="white Unselectable"><i class="icon-users-2"/>Create New User</a></li>
                    <li class="Animated05"><a href="#" class="white Unselectable"><i class="icon-sliders"/>User Preferences</a></li>
                </ul>
            </li>
            <li class="Fleft BordRadHalf TexAlCenter">
                <i class="icon-mail"/><span class="alertBubble BordRad10 Fs9">166</span>
                <ul class="layout-header-widgets-submenu BordRad5 shadows white Animated05">
                    <li class="Animated05"><a href="#" class="white Unselectable TexAlRight"><i class="icon-chat-empty yellow"/>Gustavo Fring<br /><span class="Fs10">What does a man do Walter?</span></a></li>
                    <li class="Animated05"><a href="#" class="white Unselectable TexAlRight"><i class="icon-chat-empty"/>Skyler White<br /><span class="Fs10">Where are you?.</span></a></li>
                    <li class="Animated05"><a href="#" class="white Unselectable TexAlRight"><i class="icon-chat-empty red"/>Hank Schrader<br /><span class="Fs10">Barbecue photos from last weekend.</span></a></li>
                    <li class="Animated05"><a href="#" class="white Unselectable TexAlRight"><i class="icon-chat-empty red"/>Jesse Pinkman<br /><span class="Fs10">Mr. White.</span></a></li>
                    <li class="Animated05"><a href="#" class="white Unselectable TexAlRight"><i class="icon-chat-empty"/>Heisenberg<br /><span class="Fs10">I am the one who knocks.</span></a></li>
                </ul>
            </li>
            <li class="Fleft BordRadHalf TexAlCenter">
                <i class="icon-bell"/><span class="alertBubble BordRad10 Fs9">24</span>
                <ul class="layout-header-widgets-submenu BordRad5 shadows white Animated05">
                    <li class="Animated05"><a href="#" class="white Unselectable TexAlRight"><i class="icon-flag red"/>New Products</a></li>
                    <li class="Animated05"><a href="#" class="white Unselectable TexAlRight"><i class="icon-flag yellow"/>Today Sales Reports</a></li>
                    <li class="Animated05"><a href="#" class="white Unselectable TexAlRight"><i class="icon-flag red"/>Visit Reports</a></li>
                    <li class="Animated05"><a href="#" class="white Unselectable TexAlRight"><i class="icon-flag red"/>Sales Reports</a></li>
                    <li class="Animated05"><a href="#" class="white Unselectable TexAlRight"><i class="icon-flag"/>Task Alerts</a></li>
                </ul>
            </li>
            <li class="Fleft BordRadHalf TexAlCenter">
                <i class="icon-wrench-1"/>
                <ul class="layout-header-widgets-submenu BordRad5 shadows white Animated05">
                    <li class="Animated05"><a href="#" class="white Unselectable"><i class="icon-sun"/>System Settings</a></li>
                    <li class="Animated05"><a href="#" class="white Unselectable"><i class="icon-lifebuoy"/>Help Desk</a></li>
                </ul>
            </li>
            <li class="Fleft BordRadHalf TexAlCenter">
                <i class="icon-power"/>
                <ul class="layout-header-widgets-submenu BordRad5 shadows white Animated05">
                    <li class="Animated05"><a href="login.xhtml" class="white Unselectable"><i class="icon-ccw-1"/>Restart</a></li>
                    <li class="Animated05"><a href="#" class="white Unselectable"><i class="icon-logout"/>Log Out</a></li>
                </ul>
            </li>
        </ul>

        <!-- NEVER REMOVE FOLLOWING 'UL' TAG ! BECAUSE THIS CONTAINS RESPONSIVE MODE HEADER MENU OPEN-CLOSE BUTTON -->
        <ul id="sm-mobiletopmenu" class="layout-header-widgets white Fs14">
            <li class="Fleft BordRadHalf TexAlCenter Animated05 DisplayOnResponsive"><i class="icon-th-1"/></li>
        </ul>
        <!-- ****** -->
    </div>
</ui:composition>